<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.set 全局操作</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue.set 全局操作</h1>
<hr>
<div id="app">
    {{count}}
    <p><button onclick="add()">增加</button></p>
    <ul>
        <li v-for="item in arr">{{item}}</li>
    </ul>
</div>
<script type="text/javascript">
    function add () {
      //通过三种方式实现
      // Vue.set(app,'count',2)
      //通过app数据操作
      //app.$data.count++
      //通过外部变量操作
      // outDataObj.count++;
      //如果是针对数组内的数据改变，就无法通过js原生的操作实现
      //只能通过vue.set方法
      //现在需要将arr下标为1的bbb值改为ddd操作
      Vue.set(app.arr,1,'ddd')
    }
    //定义外部变量
    var outDataObj={
      count:1,
      arr:['aaa','bbb','ccc']
    }
    var app = new Vue({
      el:'#app',
      data: outDataObj
    })
</script>
</body>
</html>